<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon">
    <meta charset="UTF-8">
    <!--移动端的预览设置，用于适配移动端-->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" th:href="@{/Semantic-UI-CSS-master/semantic.min.css}" href="../static/Semantic-UI-CSS-master/semantic.min.css">
    <link rel="stylesheet" th:href="@{/css/myblog.css}" href="../static/css/myblog.css">
    <title>登陆到账号</title>


</head>
<body style="background-image: url(/images/dashboardbackground.png)">


<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="ui middle aligned center aligned grid m-container-small m-padded-tb-big">
    <div class="column">
        <h2 class="ui teal image header">
            <div class="content header">
                用户登录
            </div>
        </h2>



        <form class="ui large form" method="post" th:action="@{/login}">
            <div class="ui stacked segment" style="background-color:rgba(255, 255, 255, 0.1)">
                <div class="field">
                    <div class="ui left icon input">
                        <i class="user icon"></i>
                        <input type="text" name="email" placeholder="邮箱地址">
                    </div>
                </div>
                <div class="field">
                    <div class="ui left icon input">
                        <i class="lock icon"></i>
                        <input type="password" name="pwd" placeholder="密码">
                    </div>
                </div>
                <div class="ui fluid large teal submit button">登录</div>
            </div>

            <div class="ui error message"></div>
        </form>
        <div class="ui inverted form message" style="background-color:rgba(255, 255, 255, 0.1)">
            <a th:href="@{/article}">回首页</a>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            新用户？ <a th:href="@{/register}">注册</a>
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <a th:href="@{/toAdminLogin}">管理员登录</a>
        </div>
        <!--回显错误信息-->
        <div style="margin: auto" align="center">
            <h3>
                <font color="red"><p th:text="${loginerror}"></p></font>
                <br>
            </h3>
        </div>


    </div>
</div>


<!---->
<br>
<br>
<br>
<br>
<br>
<br>



<script th:src="@{/js/jquery-3.5.1.min.js}" src="../static/js/jquery-3.5.1.min.js"></script>
<script th:src="@{/Semantic-UI-CSS-master/semantic.min.js}" src="../static/Semantic-UI-CSS-master/semantic.min.js"></script>
<script type="text/javascript">

    $("#b1").click(function () {
        $(".m-item").toggleClass("m-mobile-hide");
    });


    $('.ui.dropdown').dropdown({
        on: 'hover'
    })

    /*这里是表单验证的 如果你有哪个必填项填错了, 注册表单根本就不会提交. 而且会给出用户提示*/
    $('.ui.form').form({
        fields:{
            email:{
                identifier:'email',
                rules:[{
                    type:'empty',
                    prompt:'邮箱：请输入邮箱地址'
                }]
            },
            password:{
                identifier:'pwd',
                rules:[{
                    type:'empty',
                    prompt:'密码：密码不能为空'
                }]
            }
        }
    })



</script>

</body>
</html>